<!DOCTYPE html>
<html>
<head>
    <script src="../HtmlRunning/build/react.js"></script>
    <script src="../HtmlRunning/build/react-dom.js"></script>
    <script src="../HtmlRunning/build/browser.min.js"></script>
</head>
<body>
<li>embed any JavaScript expression in JSX</li>
<div id="example"></div>
<li>JSX as an Expression</li>
<div id="expression"></div>
<li>Specifying Attributes with JSX</li>
<div id="attributes"></div>
<li>Prevents Injection</li>
<div id="preventInjection"></div>
<li>JSX Represents Objects</li>
<div id="representElement"></div>
<script type="text/babel">
    const user = {
        firstName: 'Harper',
        lastName: 'Perez',
        avatarUrl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=538036100,1246761169&fm=175&s=C9B3069C7430479E9212A803030070DA&w=218&h=146&img.JPEG',
    };
    /*   embed any JavaScript expression in JSX  */
    function formatName(user) {
        return user.firstName + ' ' + user.lastName;
    }

    const element = (
            <h1>
                Hello, {formatName(user)}!
            </h1>
    );

    ReactDOM.render(
        element,
        document.getElementById('example')
    );


    /*     JSX as an Expression      */
    function getGreeting(user) {
        if (user) {
            return <h1>Hello, {formatName(user)}!</h1>;
        }
        return <h1>Hello, Stranger.</h1>;
    }

    ReactDOM.render(
        getGreeting(user),
        document.getElementById('expression')
    );

    /*    Specifying Attributes with JSX */
    const image_element = <img src={user.avatarUrl}></img>;
    ReactDOM.render(
        image_element,
        document.getElementById('attributes')
    );

    /* JSX Prevents Injection Attacks */
    const title = "this is title";
    // This is safe:
    const safe_element = <h1>{title}</h1>;

    ReactDOM.render(
        safe_element,
        document.getElementById('preventInjection')
    );

    /* JSX Represents Objects */
    const obj_element = (
            <h1 className="greeting">
                Hello, world!
            </h1>
    );

    const represent_element = React.createElement(
        'h1',
        {className: 'greeting'},
        'Hello, world!'
    );
    ReactDOM.render(
        represent_element,
        document.getElementById('representElement')
    );

</script>
</body>
</html>

